'use client';

import type { IPostReviewHistory, IQueryPostDetails } from '@/interfaces';
import { useQuery } from '@tanstack/react-query';
import { queryAllPostReviewHistoryById } from '@/services/api';
import Alert from '@/app/[locale]/alert/alert';
import AlertLoad from '@/app/[locale]/alert/load';
import { POST_COMPOSITE_STATE_KEY, POST_SORT_STATE_KEY } from '@/lib/constant';
import { toRelativeTime } from '@/lib/tool';
import classNames from 'classnames';

export default function QueryPostReviewHistory({
  details,
}: {
  details: IQueryPostDetails;
}) {
  const queryAllPostReviewHistoryByIdQuery = useQuery(
    ['/forum', '/posts', details.basic.id, '/reviewHistory'],
    async (context) => {
      return (await queryAllPostReviewHistoryById({
        id: context.queryKey[2] + '',
      })) as IPostReviewHistory[];
    },
  );

  return (
    <div className="row">
      <div className="col">
        <div className="card">
          <div className="card-header bg-transparent text-muted">
            <i className="bi bi-clock-history me-2"></i>
            审核历史
          </div>

          <div className="card-body">
            {queryAllPostReviewHistoryByIdQuery.data && (
              <>
                <div className="table-responsive">
                  <table className="table table-hover align-middle">
                    <thead>
                      <tr className="text-nowrap">
                        <th scope="col" className="fw-normal text-nowrap">
                          审核状态
                        </th>
                        <th scope="col" className="fw-normal text-nowrap">
                          审核理由
                        </th>
                        <th scope="col" className="fw-normal text-nowrap">
                          审核备注
                        </th>
                        <th scope="col" className="fw-normal text-nowrap">
                          排序状态
                        </th>
                        <th scope="col" className="fw-normal text-nowrap">
                          排序理由
                        </th>
                        <th scope="col" className="fw-normal text-nowrap">
                          排序备注
                        </th>
                        <th scope="col" className="fw-normal text-nowrap">
                          审核人员
                        </th>
                        <th scope="col" className="fw-normal text-nowrap">
                          审核时间
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      {queryAllPostReviewHistoryByIdQuery.data.map(
                        (item, index) => {
                          return (
                            <tr key={item.id} className="text-nowrap">
                              <td>
                                {item.previousReviewState &&
                                  item.finalReviewState && (
                                    <div className="row flex-nowrap">
                                      <div className="col-auto">
                                        {
                                          POST_COMPOSITE_STATE_KEY[
                                            item.finalReviewState
                                          ]
                                        }
                                      </div>
                                      <div className="col-auto">
                                        <i
                                          className={classNames(
                                            'bi bi-arrow-left',
                                            index === 0
                                              ? 'text-primary'
                                              : 'text-secondary',
                                          )}
                                        ></i>
                                      </div>
                                      <div className="col-auto text-secondary">
                                        {
                                          POST_COMPOSITE_STATE_KEY[
                                            item.previousReviewState
                                          ]
                                        }
                                      </div>
                                    </div>
                                  )}
                              </td>
                              <td
                                title={item.reason || ''}
                                className="text-wrap"
                              >
                                <div
                                  dangerouslySetInnerHTML={{
                                    __html: item.reason || '',
                                  }}
                                ></div>
                              </td>
                              <td
                                title={item.remark || ''}
                                className="text-wrap"
                              >
                                <div
                                  dangerouslySetInnerHTML={{
                                    __html: item.remark || '',
                                  }}
                                ></div>
                              </td>
                              <td>
                                {item.previousSortState &&
                                  item.finalSortState && (
                                    <div className="row flex-nowrap">
                                      <div className="col-auto">
                                        {
                                          POST_SORT_STATE_KEY[
                                            item.finalSortState
                                          ]
                                        }
                                      </div>
                                      <div className="col-auto">
                                        <i
                                          className={classNames(
                                            'bi bi-arrow-left',
                                            index === 0
                                              ? 'text-primary'
                                              : 'text-secondary',
                                          )}
                                        ></i>
                                      </div>
                                      <div className="col-auto text-secondary">
                                        {
                                          POST_SORT_STATE_KEY[
                                            item.previousSortState
                                          ]
                                        }
                                      </div>
                                    </div>
                                  )}
                              </td>
                              <td
                                title={item.sortReason || ''}
                                className="text-wrap"
                              >
                                <div
                                  dangerouslySetInnerHTML={{
                                    __html: item.sortReason || '',
                                  }}
                                ></div>
                              </td>
                              <td
                                title={item.sortRemark || ''}
                                className="text-wrap"
                              >
                                <div
                                  dangerouslySetInnerHTML={{
                                    __html: item.sortRemark || '',
                                  }}
                                ></div>
                              </td>
                              <td>{`${item.reviewer.alias} (${item.reviewer.id})`}</td>
                              <td>
                                <time
                                  dateTime={item.createdOn}
                                  title={item.createdOn}
                                >
                                  {toRelativeTime(item.createdOn)}
                                </time>
                              </td>
                            </tr>
                          );
                        },
                      )}
                    </tbody>
                  </table>
                </div>

                {queryAllPostReviewHistoryByIdQuery.data.length === 0 && (
                  <div className="text-center text-secondary">暂无审核历史</div>
                )}
              </>
            )}

            {queryAllPostReviewHistoryByIdQuery.isError && (
              <Alert
                message={queryAllPostReviewHistoryByIdQuery.error}
                type="error"
              />
            )}

            {queryAllPostReviewHistoryByIdQuery.isLoading && <AlertLoad />}
          </div>
        </div>
      </div>
    </div>
  );
}
